<template>
  <div>
    <div style="display: flex">
      <div>
        <el-button type="primary" @click="lastWeek">上周</el-button>
        <el-button type="primary" @click="ThisWeek">本周</el-button>
        <el-button type="primary" @click="nextWeek">下周</el-button>
      </div>
    </div>
    <div style="margin-top: 30px; display: flex">
      <!-- <el-button type="primary" @click="addScheduling">新增排班</el-button> -->
      <el-table border :data="schedulingList.list" style="width: 100%">
        <el-table-column label="星期一">
          <template slot-scope="scope">
            <div v-if="scope.row.scheduling_date == schedulingList.weeks[0]">
              <p>
                {{ scope.row.scheduling_time }}
              </p>
              <p>
                {{ scope.row.username }}
              </p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-table border :data="schedulingList.list" style="width: 100%">
        <el-table-column label="星期二" prop="scheduling_date">
          <template slot-scope="scope">
            <p v-if="scope.row.scheduling_date == schedulingList.weeks[1]">
              {{ scope.row.scheduling_time }}
            </p>
            <p>
              {{ scope.row.username }}
            </p>
          </template>
        </el-table-column>
      </el-table>
      <el-table border :data="schedulingList.list" style="width: 100%">
        <el-table-column label="星期三" prop="scheduling_date">
          <template slot-scope="scope">
            <p v-if="scope.row.scheduling_date == schedulingList.weeks[2]">
              {{ scope.row.scheduling_date }}
              {{ scope.row.username }}
            </p>
          </template>
        </el-table-column>
      </el-table>
      <el-table border :data="schedulingList.list" style="width: 100%">
        <el-table-column label="星期四" prop="scheduling_date">
          <template slot-scope="scope">
            <p v-if="scope.row.scheduling_date == schedulingList.weeks[3]">
              {{ scope.row.scheduling_date }}
              {{ scope.row.username }}
            </p>
          </template>
        </el-table-column>
      </el-table>
      <el-table border :data="schedulingList.list" style="width: 100%">
        <el-table-column label="星期五" prop="scheduling_date">
          <template slot-scope="scope">
            <p v-if="scope.row.scheduling_date == schedulingList.weeks[4]">
              {{ scope.row.scheduling_date }}
              {{ scope.row.username }}
            </p>
          </template>
        </el-table-column>
      </el-table>
      <el-table border :data="schedulingList.list" style="width: 100%">
        <el-table-column label="星期六" prop="scheduling_date">
          <template slot-scope="scope">
            <p v-if="scope.row.scheduling_date == schedulingList.weeks[5]">
              {{ scope.row.scheduling_date }}
              {{ scope.row.username }}
            </p>
          </template>
        </el-table-column>
      </el-table>
      <el-table border :data="schedulingList.list" style="width: 100%">
        <el-table-column label="星期六" prop="scheduling_date">
          <template slot-scope="scope">
            <p v-if="scope.row.scheduling_date == schedulingList.weeks[6]">
              {{ scope.row.scheduling_date }}
              {{ scope.row.username }}
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="提示" :visible.sync="schedulingShow" width="60%">
      <!-- <span>这是一段信息</span> -->
      <div>
        <p>选择医生</p>
        <el-select v-model="value" placeholder="请选择医生">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <p>排班间隔</p>
        <el-select v-model="value" placeholder="请选择排班间隔">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <p>排班时间（可自行输入开始时间）</p>
        <el-date-picker
          v-model="timeData"
          format="yyyy-MM-dd"
          placeholder="选择日期"
          type="date"
          value-format="“yyyy-MM-dd”"
          @change="timeDataChange"
        />
        <el-time-select
          v-model="startTime"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30',
          }"
          placeholder="起始时间"
        />
        <el-time-select
          v-model="endTime"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30',
            minTime: startTime,
          }"
          placeholder="结束时间"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="schedulingShow = false">取 消</el-button>
        <el-button type="primary" @click="schedulingShow = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getSchedulingList } from '@/api/scheduling'

  export default {
    name: 'Reception',
    data() {
      return {
        schedulingShow: false,
        tableData: [],
        startTime: '',
        endTime: '',
        timeData: '',
        weekindex: 0,
        // 排班列表
        schedulingList: {},
        options: [
          {
            value: '选项1',
            label: '20分钟',
          },
          {
            value: '选项2',
            label: '30分钟',
          },
          {
            value: '选项3',
            label: '40分钟',
          },
          {
            value: '选项4',
            label: '50分钟',
          },
          {
            value: '选项5',
            label: '60分钟',
          },
        ],
        value: '',
      }
    },
    computed: {},
    mounted() {
      this.init()
    },
    methods: {
      // 初始化
      init() {
        this.scheduling()
      },
      timeDataChange() {},
      addScheduling() {
        this.schedulingShow = true
      },
      // 获取排班列表
      scheduling() {
        getSchedulingList(this.weekindex).then((res) => {
          this.schedulingList = res.data
        })
      },
      lastWeek() {
        this.weekindex--
        this.scheduling()
      },
      ThisWeek() {
        this.weekindex = 0
        this.scheduling()
      },
      nextWeek() {
        this.weekindex++
        this.scheduling()
      },
    },
  }
</script>

<style></style>
